<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>公告管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-form :inline="true" :model="queryInfo" style="margin-top: 10px;">
			<el-form-item label="公告名称">
				<el-input v-model="queryInfo.name"></el-input>
			</el-form-item>
			<!-- 	<el-form-item label="电话后四位">
				<el-input v-model="queryInfo.phone"></el-input>
			</el-form-item> -->
			<el-form-item>
				<el-button type="primary" @click="getPublicityList()">搜索</el-button>
			</el-form-item>
		</el-form>

		<el-button type="primary" size="small" style="margin-bottom: 20px;" @click="addPublicity()">新增公告</el-button>

		<el-table :data="PublicityList" style="width: 100%" border>
			<el-table-column prop="id" label="ID" width="180">
			</el-table-column>
			<el-table-column prop="name" label="公告名" width="180">
			</el-table-column>
			<el-table-column prop="publicityText" label="公告内容">
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-link :underline="false" type="primary"
						@click="toEditPublicity(scope.row)">编辑公告</el-link>&nbsp;&nbsp;
					<el-link :underline="false" type="primary" @click="removePublicity(scope.row.id)">删除公告</el-link>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination :page-sizes="[1, 5, 10, 20]" :page-size="queryInfo.pageSize" :current-page="queryInfo.pageNum"
			@size-change="handleSizeChange" @current-change="handleCurrentChange"
			layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-top: 10px;">
		</el-pagination>


		<el-dialog :title="title" :visible.sync="dialogFormVisible" @close='cancal()'>
			<el-form :model="Publicity">
				<el-form-item label="公告名" label-width="80px">
					<el-input v-model="Publicity.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="公告内容" label-width="80px">
					<el-input v-model="Publicity.publicityText" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="创建时间" label-width="80px">
					<el-input v-model="Publicity.createTime" autocomplete="off"></el-input>
				</el-form-item>
				<!-- <el-form-item label="电话" label-width="80px">
					<el-input v-model="User.phone" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="分数" label-width="80px">
					<el-input v-model="User.point" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" label-width="80px">
					<el-input v-model="User.email" autocomplete="off"></el-input>
				</el-form-item> -->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancal()">取 消</el-button>
				<el-button type="primary" @click="confirm()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				queryInfo: {
					name: '',
					pageNum: 1,
					pageSize: 5,
				},
				PublicityList: [],
				total: 1,
				title: '',
				dialogFormVisible: false,
				Publicity: {
					"id": '',
					"name": "",
					"publicityText": "",
					"createTime": "",
				},
				// fileList: [],
				// dialogImageUrl: '', // 预览图片路径
				// dialogVisible: false, // 预览图片的对话框
			}
		},
		methods: {
			toEditPublicity(row) {
				this.title = "修改公告";
				this.Publicity = row
				this.dialogFormVisible = true
			},
			addPublicity() {
				this.dialogFormVisible = true
				this.title = "新增公告"
			},
			confirm() {
				if (this.Publicity.id) {
					this.$http.put('Publicity', this.Publicity)
						.then(resa => {
							if (resa.data.status == 200) {
								this.$message.success('添加成功')
								this.getPublicityList()
								this.cancal()
							} else {
								this.$message.error('提交失败')
							}
						})
				} else {
					this.$http.post('Publicity', this.Publicity)
						.then(resa => {
							if (resa.data.status == 200) {
								this.$message.success('提交成功')
								this.getPublicityList()
								this.cancal()
							} else {
								this.$message.error('提交失败')
							}
						})
				}
			},
			cancal() {
				this.dialogFormVisible = false;
				this.Publicity = {
					"id": '',
					"name": "",
					"publicityText": "",
					"createTime": "",
				}
				// this.fileList = []
			},
			removePublicity(id) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.delete('Publicity/delete/' + id)
						.then(res => {
							if (res.data.status == 200) {
								this.$message.success(res.data.message)
								this.getPublicityList()
							} else {
								this.$message.error("删除失败")
							}
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			getPublicityList() {
				this.$http.get('Publicity/pageSelect', {
						params: this.queryInfo
					})
					.then(res => {
						if (res.data.status == 200) {
							this.PublicityList = res.data.data.list
							this.total = res.data.data.total
						} else {
							this.$message('请求异常')
						}
					})
					.catch(err => {
						this.$message.error(err)
					})
			},
			handleSizeChange(size) {
				//console.log('每页显示数量发生改变');
				this.queryInfo.pageSize = size;
				this.queryInfo.pageNum = 1;
				// 重新查询
				this.getPublicityList()
			},
			handleCurrentChange(num) {
				//console.log('页码发生改变');
				this.queryInfo.pageNum = num;
				// 重新查询
				this.getPublicityList()
			}

		},
		mounted() {
			this.getPublicityList()
		}
	}
</script>

<style>
</style>